<template>
  <div style="">
    <Header :left="true" leftText="返回" title="用户信息填报"> </Header>
    <NoticeBar color="#1989fa" background="#ecf9ff" style="margin-top: 5px; font-size: 15px; font-weight: bold"
      left-icon="description">新增</NoticeBar>

    <van-form :style="autoHeight" @submit="onSubmit">
      <van-field class="formstyle" required v-model="form.EventDescription" name="事件描述" label="事件描述"
        placeholder="输入事件描述" />

      <van-field required readonly class="formstyle" :value="valueEventType" name="picker" label="事件类型"
        placeholder="点击选择事件类型" @click="showPickerEventTypeID = true" />
      <van-popup v-model="showPickerEventTypeID" position="bottom">
        <van-picker show-toolbar :columns="columnsEventTypeID" @confirm="onConfirmEventTypeID"
          @cancel="showPickerEventTypeID = false">
          <template #option="option">
            <div style="display: flex; flex-direction: column; align-items: center">
              <div>{{ option.EventTypeName }}</div>
            </div>
          </template>
        </van-picker>
      </van-popup>

      <NoticeBar color="#1989fa" background="#ecf9ff" style="margin-top: 5px; font-size: 15px; font-weight: bold"
        left-icon="description">消息基本信息</NoticeBar>

      <van-field required readonly class="formstyle" :value="valueEventID" name="picker" label="消息模板"
        placeholder="点击选择消息模板" @click="showPickerEventID = true" />
      <van-popup v-model="showPickerEventID" position="bottom">
        <van-picker show-toolbar :columns="columnsEventID" @confirm="onConfirmEventID"
          @cancel="showPickerEventID = false">
          <template #option="option">
            <div style="display: flex; flex-direction: column; align-items: center">
              <div>{{ option.EventName }}</div>
            </div>
          </template>
        </van-picker>
      </van-popup>

      <van-field required readonly class="formstyle" :value="valueMsgContentTypeID" name="picker" label="消息内容分类"
        placeholder="点击选择消息内容分类" @click="showPickerMsgContentTypeID = true" />
      <van-popup v-model="showPickerMsgContentTypeID" position="bottom">
        <van-picker show-toolbar :columns="columnsMsgContentTypeID" @confirm="onConfirmMsgContentTypeID"
          @cancel="showPickerMsgContentTypeID = false">
          <template #option="option">
            <div style="display: flex; flex-direction: column; align-items: center">
              <div>{{ option.MsgContentTypeName }}</div>
            </div>
          </template>
        </van-picker>
      </van-popup>

      <van-field v-model="form.MessageContent" class="formstyle" rows="4" autosize label="消息内容" type="textarea"
        maxlength="150" placeholder="输入消息内容" show-word-limit />

      <NoticeBar color="#1989fa" background="#ecf9ff" style="margin-top: 5px; font-size: 15px; font-weight: bold"
        left-icon="description">消息关联对象</NoticeBar>

      <van-field required readonly class="formstyle" name="picker" :value="valuepline" label="生产线代码"
        placeholder="点击选择生产线代码" @click="showPickerpline = true" />
      <van-popup v-model="showPickerpline" position="bottom">
        <van-picker show-toolbar :columns="columnspline" @confirm="onConfirmpline" @cancel="showPickerpline = false">
          <template #option="option">
            <div style="display: flex; flex-direction: column; align-items: center">
              <div>{{ option.plineName }}</div>
            </div>
          </template>
        </van-picker>
      </van-popup>

      <van-field required readonly class="formstyle" name="picker" :value="valueMachineID" label="设备代码"
        placeholder="点击选择设备代码" @click="showPickerMachineID = true" />
      <van-popup v-model="showPickerMachineID" position="bottom">
        <van-picker show-toolbar :columns="columnsMachineID" @confirm="onConfirmMachineID"
          @cancel="showPickerMachineID = false">
          <template #option="option">
            <div style="display: flex; flex-direction: column; align-items: center">
              <div>{{ option.MachineName }}</div>
            </div>
          </template>
        </van-picker>
      </van-popup>
      <van-field class="formstyle" required v-model="form.POrderID" name="订单" label="订单" placeholder="输入订单" />
      <van-field class="formstyle" required v-model="form.MaterialBarcode" name="涉及材料条码" label="涉及材料条码"
        placeholder="输入涉及材料条码" />
      <van-field class="formstyle" required v-model="form.ProductionBarcode" name="涉及产品条码" label="涉及产品条码"
        placeholder="输入涉及产品条码" />
      <van-field class="formstyle" required v-model="form.RelatedEmployee" name="事件相关人员" label="事件相关人员"
        placeholder="输入事件相关人员" />

      <van-field class="formstyle" required v-model="form.PShiftID" name="班次" label="班次" placeholder="输入班次" />

      <van-field required readonly class="formstyle" name="picker" :value="valueTeamID" label="班组" placeholder="点击选择班组"
        @click="showPickerTeamID = true" />
      <van-popup v-model="showPickerTeamID" position="bottom">
        <van-picker show-toolbar :columns="columnsTeamID" @confirm="onConfirmTeamID" @cancel="showPickerTeamID = false">
          <template #option="option">
            <div style="display: flex; flex-direction: column; align-items: center">
              <div>{{ option.TeamName }}</div>
            </div>
          </template>
        </van-picker>
      </van-popup>

      <van-field class="formstyle" required v-model="form.EntityID" name="对象ID" label="对象ID" placeholder="输入对象ID" />

      <NoticeBar color="#1989fa" background="#ecf9ff" style="margin-top: 5px; font-size: 15px; font-weight: bold"
        left-icon="description">事件历史</NoticeBar>
      <van-field required readonly clickable class="formstyle" name="datetimePicker" :value="form.EventDatetime"
        label="事件发生时间" placeholder="选择时间" @click="showPickerEventDatetime = true" />
      <van-popup v-model="showPickerEventDatetime" position="bottom">
        <van-datetime-picker type="datetime" @confirm="onConfirmEventDatetime" @cancel="showPickerEventDatetime = false"
          :min-date="minDate" :max-date="maxDate" :value="currentdate" />
      </van-popup>

      <van-field class="formstyle" required v-model="form.MessageStatus" name="消息状态" label="消息状态" placeholder="输入消息状态" />

      <van-field required readonly clickable class="formstyle" name="datetimePicker" :value="form.BeginDatetime"
        label="开始发送时间" placeholder="选择时间" @click="showPickerBeginDatetime = true" />
      <van-popup v-model="showPickerBeginDatetime" position="bottom">
        <van-datetime-picker type="datetime" @confirm="onConfirmBeginDatetime" @cancel="showPickerBeginDatetime = false"
          :min-date="minDate" :max-date="maxDate" :value="currentdate" />
      </van-popup>

      <van-field required readonly clickable class="formstyle" name="datetimePicker" :value="form.LastSendedDatetime"
        label="最后发送时间" placeholder="选择时间" @click="showPickerLastSendedDatetime = true" />
      <van-popup v-model="showPickerLastSendedDatetime" position="bottom">
        <van-datetime-picker type="datetime" @confirm="onConfirmLastSendedDatetime"
          @cancel="showPickerLastSendedDatetime = false" :min-date="minDate" :max-date="maxDate" :value="currentdate" />
      </van-popup>

      <van-field class="formstyle" required v-model="form.ProcessBatchID" name="消息处理批号" label="消息处理批号"
        placeholder="输入消息处理批号" />
      <van-field required readonly class="formstyle" name="picker" :value="valueTrueOrFalseClosed" label="事件已关闭"
        placeholder="点击选择事件已关闭" @click="showPickerTrueOrFalseClosed = true" />
      <van-popup v-model="showPickerTrueOrFalseClosed" position="bottom">
        <van-picker show-toolbar :columns="columnsTrueOrFalseClosed" @confirm="onConfirmvalueTrueOrFalseIDClosed"
          @cancel="showPickerTrueOrFalseClosed = false">
          <template #option="option">
            <div style="display: flex; flex-direction: column; align-items: center">
              <div>{{ option.TrueOrFalseName }}</div>
            </div>
          </template>
        </van-picker>
      </van-popup>

      <van-field required readonly class="formstyle" name="picker" :value="valueTrueOrFalseSendFinished" label="发送任务完结"
        placeholder="点击选择发送任务完结" @click="showPickerTrueOrFalseSendFinished = true" />
      <van-popup v-model="showPickerTrueOrFalseSendFinished" position="bottom">
        <van-picker show-toolbar :columns="columnsTrueOrFalseSendFinished"
          @confirm="onConfirmvalueTrueOrFalseIDSendFinished" @cancel="showPickerTrueOrFalseSendFinished = false">
          <template #option="option">
            <div style="display: flex; flex-direction: column; align-items: center">
              <div>{{ option.TrueOrFalseName }}</div>
            </div>
          </template>
        </van-picker>
      </van-popup>

      <div style="margin: 16px">
        <van-button color="#138087" round block type="info" native-type="submit" @click="submitsure">保存</van-button>
      </div>
    </van-form>
  </div>
</template>
  
<script>
import {
  Col,
  Row,
  Form,
  Cell,
  Icon,
  Field,
  NumberKeyboard,
  Image as VanImage,
  Picker,
  popup,
  SubmitBar,
  Button,
  Loading,
  Overlay,
  Dialog,
  Toast,
  NoticeBar,
  Tag,
  DatetimePicker,
  ImagePreview,
  CellGroup,
  Uploader,
  Cascader,
  Calendar,
  RadioGroup,
  Radio,
  Divider,
  Stepper,
  AddressList,
  Checkbox,
  CheckboxGroup,
} from "vant";

import "vue-easytable/libs/themes-base/index.css";
import { VTable } from "vue-easytable";
import { _httpClient as _httpClientApisie } from "@/libs/apisie";
import { _httpClient as _httpClientApi } from "@/libs/api";
import { getToken, getBaseApiFrefix } from "@/libs/auth";
import Header from "@/components/header.vue";
import { storage } from "@/libs/utils";

Vue.use(Form);
Vue.use(Field);
Vue.use(Overlay);
Vue.use(Loading);
Vue.use(Picker);
Vue.use(popup);
Vue.use(SubmitBar);
Vue.use(VanImage);
Vue.use(DatetimePicker);
Vue.use(Cascader);
Vue.use(Calendar);
Vue.use(Cell);
Vue.use(RadioGroup);
Vue.use(Radio);
Vue.use(Divider);
Vue.use(Stepper);
Vue.use(Button);
Vue.use(AddressList);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(Col);
Vue.use(Row);

export default {
  name: "InsertManualReporting",
  components: {
    Form,
    Row,
    Col,
    Button,
    Header,
    Form,
    Cell,
    Icon,
    Field,
    NumberKeyboard,
    Dialog,
    Toast,
    NoticeBar,
    Row,
    Tag,
    popup,
    DatetimePicker,
    ImagePreview,
    CellGroup,
    Uploader,
    Col,
    Calendar,
    Cascader,
    Picker,
    RadioGroup,
    Radio,
    Divider,
    Stepper,
    VTable,
    AddressList,
    Checkbox,
    CheckboxGroup,
  },
  data() {
    return {
      showPickerTeamID: false,
      showPickerMachineID: false,
      showPickerMsgContentTypeID: false,
      showPickerEventTypeID: false,
      showPickerEventID: false,
      showPickerEventDatetime: false,
      showPickerBeginDatetime: false,
      showPickerLastSendedDatetime: false,
      showPickerTrueOrFalseClosed: false,
      showPickerTrueOrFalseSendFinished: false,
      columnsMachineID: [],
      columnsEventTypeID: [],
      columnsMsgContentTypeID: [],
      columnsEventID: [],
      columnsTeamID: [
        { TeamID: "SJT02", TeamName: "太仓塑胶B班" },
        { TeamName: "太仓塑胶A班", TeamID: "SJT01" },
      ],

      columnsTrueOrFalseClosed: [
        { TrueOrFalseID: "true", TrueOrFalseName: "是" },
        { TrueOrFalseName: "否", TrueOrFalseID: "false" },
      ],
      columnsTrueOrFalseSendFinished: [
        { TrueOrFalseID: "true", TrueOrFalseName: "是" },
        { TrueOrFalseName: "否", TrueOrFalseID: "false" },
      ],
      valueTeamID: "",
      valueTrueOrFalseClosed: "",
      valueTrueOrFalseSendFinished: "",
      valueEventID: "",
      valueMachineID: "",
      valueMsgContentTypeID: "",
      valueEventType: "",
      valueplineid: "",
      valueformstyleid: "",
      user: [],
      planworkdatetime: "",
      pOrderID: "",
      message: "",
      minDate: new Date(2023, 1, 1),
      maxDate: new Date(2025, 10, 1),
      currentdate: new Date(),
      nowDate: null,
      nowtimer: "",
      valuepline: "",
      showPickerpline: false,
      showPickerdatetime: false,
      form: [],
      columnspline: [
        { plineid: "01", plinename: "产线一" },
        { plineid: "02", plinename: "产线二" },
        { plineid: "03", plinename: "产线三" },
      ],
      valueformstyle: "",
      showPickerformstyle: false,
      columnsformstyle: [
        { formstyleid: "SM05", formstylename: "生产条件异常加严" },
        { formstyleid: "SM04", formstylename: "检验设备异常加严" },
        { formstyleid: "SM03", formstylename: "质量异常加严" },
        { formstyleid: "SM02", formstylename: "主生产设备异常加严" },
        { formstyleid: "SM01", formstylename: "工艺参数异常类型加严" },
      ],
    };
  },
  created: function () {
    this.user = JSON.parse(storage.get("user"));
    this.user.userId = this.user.userName;
    this.getPline();
    this.getEventTypeID();
    this.getEventID();
    this.getMsgContentTypeID();
    this.getMachineID();
  },
  mounted() { },

  methods: {
    async submitsure() {
      let _this = this;
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: "请稍等...",
      });
      let bodyss = {
        eventDescription: _this.form.EventDescription,
        eventDatetime: _this.form.EventDatetime,
        eventTypeID: _this.form.EventTypeID,
        eventID: _this.form.EventID,
        messageContent: _this.form.MessageContent,
        msgContentTypeID: _this.form.MsgContentTypeID,
        factoryID: "TC00",
        pLineID: _this.pOrderID,
        machineID: _this.form.MachineID,
        pShiftID: _this.form.PShiftID,
        teamID: _this.form.TeamID,
        pOrderID: _this.form.POrderID,
        productionBarcode: _this.form.ProductionBarcode,
        materialBarcode: _this.form.MaterialBarcode,
        relatedEmployee: _this.form.RelatedEmployee,
        messageStatus: _this.form.MessageStatus,
        processBatchID: _this.form.ProcessBatchID,
        beginDatetime: _this.form.BeginDatetime,
        lastSendedDatetime: _this.form.LastSendedDatetime,
        sendFinished: _this.form.SendFinished,
        closed: _this.form.Closed,
        entityID: _this.form.EntityID,
      };
      //alert(JSON.stringify(bodyss));
      try {
        let res = await _httpClientApisie.post(
          _httpClientApisie.getApiPrefix() + "/RealtimeEventMessage/SaveEntity",
          {
            body: bodyss,
          }
        );
        if (res.HttpCode === "200") {
          Toast.clear();
          Toast.success("发送成功");
          // alert(JSON.stringify(res))
          setTimeout(function () {
            _this.$ac.closeWin();
          }, 2000);
        } else {
          Toast.clear();
          Toast.fail("发送失败");
        }
      } catch (e) {
        Toast.fail(JSON.stringify(e));
      }
    },
    onConfirmdatetime(time) {
      this.tempTime = time;
      this.planworkdatetime = `${time.getFullYear()}-${time.getMonth() + 1
        }-${time.getDate()} ${time.getHours().toString().padStart(2, 0)}:${time
          .getMinutes()
          .toString()
          .padStart(2, 0)}`;
      this.showPickerdatetime = false;
    },

    onConfirmEventDatetime(time) {
      this.tempTime = time;
      this.form.EventDatetime = `${time.getFullYear()}-${time.getMonth() + 1
        }-${time.getDate()} ${time.getHours().toString().padStart(2, 0)}:${time
          .getMinutes()
          .toString()
          .padStart(2, 0)}`;
      this.showPickerEventDatetime = false;
    },

    onConfirmBeginDatetime(time) {
      this.tempTime = time;
      this.form.BeginDatetime = `${time.getFullYear()}-${time.getMonth() + 1
        }-${time.getDate()} ${time.getHours().toString().padStart(2, 0)}:${time
          .getMinutes()
          .toString()
          .padStart(2, 0)}`;
      this.showPickerBeginDatetime = false;
    },
    onConfirmLastSendedDatetime(time) {
      this.tempTime = time;
      this.form.LastSendedDatetime = `${time.getFullYear()}-${time.getMonth() + 1
        }-${time.getDate()} ${time.getHours().toString().padStart(2, 0)}:${time
          .getMinutes()
          .toString()
          .padStart(2, 0)}`;
      this.showPickerLastSendedDatetime = false;
    },

    onConfirmpline(value, index) {
      this.valuepline = value;
      this.form.PLineID = this.columnspline[index].plineId;
      this.valuepline = this.columnspline[index].plineName;
      this.showPickerpline = false;
    },
    onConfirmformstyle(value, index) {
      this.valueformstyleid = this.columnsformstyle[index].formstyleid;
      this.valueformstyle = this.columnsformstyle[index].formstylename;
      //alert(this.columnsformstyle[index].formstyleName);
      this.showPickerformstyle = false;
    },
    onConfirmEventTypeID(value, index) {
      this.valueEventType = this.columnsEventTypeID[index].EventTypeName;
      this.form.EventTypeID = this.columnsEventTypeID[index].EventTypeID;
      //alert(this.columnsformstyle[index].formstyleName);
      this.showPickerEventTypeID = false;
    },
    onConfirmEventID(value, index) {
      this.valueEventID = this.columnsEventID[index].EventName;
      this.form.EventID = this.columnsEventID[index].EventID;
      //alert(this.columnsformstyle[index].formstyleName);
      this.showPickerEventID = false;
    },
    onConfirmMsgContentTypeID(value, index) {
      this.valueMsgContentTypeID =
        this.columnsMsgContentTypeID[index].MsgContentTypeName;
      this.form.MsgContentTypeID =
        this.columnsMsgContentTypeID[index].MsgContentTypeID;
      //alert(this.columnsformstyle[index].formstyleName);
      this.showPickerMsgContentTypeID = false;
    },

    onConfirmMachineID(value, index) {
      this.valueMachineID = this.columnsMachineID[index].MachineName;
      this.form.MachineID = this.columnsMachineID[index].MachineID;
      //alert(this.columnsformstyle[index].formstyleName);
      this.showPickerMachineID = false;
    },

    onConfirmTeamID(value, index) {
      this.valueTeamID = this.columnsTeamID[index].TeamName;
      this.form.TeamID = this.columnsTeamID[index].TeamID;
      //alert(this.columnsformstyle[index].formstyleName);
      this.showPickerTeamID = false;
    },

    onConfirmvalueTrueOrFalseIDClosed(value, index) {
      this.valueTrueOrFalseClosed =
        this.columnsTrueOrFalseClosed[index].TrueOrFalseName;
      this.form.Closed = this.columnsTrueOrFalseClosed[index].TrueOrFalseID;
      //alert(this.columnsformstyle[index].formstyleName);
      this.showPickerTrueOrFalseClosed = false;
    },

    onConfirmvalueTrueOrFalseIDSendFinished(value, index) {
      this.valueTrueOrFalseSendFinished =
        this.columnsTrueOrFalseSendFinished[index].TrueOrFalseName;
      this.form.SendFinished =
        this.columnsTrueOrFalseSendFinished[index].TrueOrFalseID;
      //alert(this.columnsformstyle[index].formstyleName);
      this.showPickerTrueOrFalseSendFinished = false;
    },

    clear() {
      this.form = "";
    },
    async getPline() {
      let _this = this;
      try {
        let res = await _httpClientApisie.get(
          _httpClientApisie.getApiPrefix() +
          "/PLineEquipment/GetList?FactoryID=TC00"
        );
        if (res.HttpCode === "200") {
          //alert(JSON.stringify(res));
          let teamMap = res.Data.map((item) => ({
            plineId: item.PLineID,
            plineName: item.PLineName,
          }));
          _this.columnspline = teamMap;
          _this.columnsplinenew = teamMap;
        }
      } catch (e) {
        Toast.fail(JSON.stringify(e));
      }
    },

    async getEventTypeID() {
      let _this = this;
      try {
        let res = await _httpClientApisie.get(
          _httpClientApisie.getApiPrefix() + "/EventType/GetList?FactoryID=TC00"
        );
        if (res.HttpCode === "200") {
          //alert(JSON.stringify(res));
          let teamMap = res.Data.map((item) => ({
            EventTypeID: item.EventTypeID,
            EventTypeName: item.EventTypeName,
          }));
          _this.columnsEventTypeID = teamMap;
        }
      } catch (e) {
        Toast.fail(JSON.stringify(e));
      }
    },

    async getEventID() {
      let _this = this;
      try {
        let res = await _httpClientApisie.get(
          _httpClientApisie.getApiPrefix() + "/RealtimeEventTemplate/GetList"
        );
        if (res.HttpCode === "200") {
          //alert(JSON.stringify(res));
          let teamMap = res.Data.map((item) => ({
            EventID: item.EventID,
            EventName: item.EventName,
          }));
          _this.columnsEventID = teamMap;
        }
      } catch (e) {
        Toast.fail(JSON.stringify(e));
      }
    },

    async getMsgContentTypeID() {
      let _this = this;
      try {
        let res = await _httpClientApisie.get(
          _httpClientApisie.getApiPrefix() + "/MessageContentType/GetList"
        );
        if (res.HttpCode === "200") {
          //alert(JSON.stringify(res));
          let teamMap = res.Data.map((item) => ({
            MsgContentTypeID: item.MsgContentTypeID,
            MsgContentTypeName: item.MsgContentTypeName,
          }));
          _this.columnsMsgContentTypeID = teamMap;
        }
      } catch (e) {
        Toast.fail(JSON.stringify(e));
      }
    },

    async getMachineID() {
      let _this = this;
      try {
        let res = await _httpClientApisie.get(
          _httpClientApisie.getApiPrefix() + "/MachineEquipment/GetList"
        );
        if (res.HttpCode === "200") {
          //alert(JSON.stringify(res));
          let teamMap = res.Data.map((item) => ({
            MachineID: item.MachineID,
            MachineName: item.MachineName,
          }));
          _this.columnsMachineID = teamMap;
        }
      } catch (e) {
        Toast.fail(JSON.stringify(e));
      }
    },
  },
};
</script>
  
<style></style>
  